<template>
  <view class="icon-container">
    <!-- 图标区域 -->
    <scroll-view
        class="scroll-view"
        scroll-x="true"
        show-scrollbar="false"
        :scroll-left="scrollLeft"
        @scroll="handleScroll"
        scroll-with-animation
    >
      <view v-for="(item, index) in icons" :key="index" class="icon-item" @click="handleIconClick(item)">
        <view class="icon-bg">
          <template v-if="item.iconSrc">
            <image :src="item.iconSrc" class="icon-image"></image>
          </template>
          <template v-else>
            <u-icon :name="item.iconName" size="28" color="#fff"></u-icon>
          </template>
        </view>
        <text class="icon-label">{{ item.label }}</text>
      </view>
    </scroll-view>

    <!-- 右侧固定的"更多功能" -->
    <view class="more-functions" @click="openMoreFunctions">
      <view class="icon-bg">
        <u-icon name="more-dot-fill" size="28" color="black"></u-icon>
      </view>
      <text class="icon-label">更多功能</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const icons = ref([
  {
    label: '跑腿代取',
    iconName: 'express',
    type: 'errand',
    iconSrc: "/static/icon/home-run.png",
	path:"/pages/run/run"
  },
  {
    label: 'AI客服',
    iconName: 'shop',
    type: 'product',
    iconSrc: "/static/icon/game.png",
	path:"/pages/AIChat/AIChat"
  },
  {
    label: '话题辩论',
    iconName: 'chat',
    type: 'topic',
    iconSrc: "/static/icon/home-topic.png",
  },
  {
    label: '商城入口',  // 新增商城入口按钮
    iconName: 'cart-full',  // 商城购物车图标
    type: 'mall',  // 标识为商城类型
    iconSrc: "/static/icon/home-shop.png",
    path: '/pages/components/shop/shop'  // 绑定目标页面路径
  }
]);

// 滚动相关状态
const scrollLeft = ref(0);
const handleScroll = (e) => {
  scrollLeft.value = e.detail.scrollLeft;
};

// 图标点击事件
const handleIconClick = (item) => {
  // 根据图标类型处理不同跳转逻辑
  if (item.type === 'mall' && item.path) {
    // 商城入口跳转
    uni.navigateTo({
      url: item.path
    })
  } else {
    // 其他图标点击逻辑
    switch (item.type) {
      case 'errand':
        uni.navigateTo({
        	url: item.path
        });
        break;
      case 'product':
        uni.navigateTo({
        	url: item.path
        });
        break;
      case 'topic':
        uni.showToast({title: '话题辩论功能开发中', icon: 'none'});
        break;
      case 'match':
        uni.showToast({title: '匹配功能开发中', icon: 'none'});
        break;
      default:
        uni.showToast({title: '功能开发中', icon: 'none'});
    }
  }
};

// 打开更多功能
const openMoreFunctions = () => {
  uni.showActionSheet({
    itemList: ['功能设置', '帮助中心', '关于我们'],
    success: (res) => {
      console.log('选中了第', res.tapIndex, '个选项');
    }
  });
};
</script>

<style lang="scss">
.icon-container {
  width: 670rpx;
  position: relative;
  padding: 20rpx 70rpx 20rpx 0;
/*  background-color: #fff;
  border-bottom: 1rpx solid #f0f0f0;*/
  margin: 0 auto;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}

/* 活动标签样式 */
.activity-tag {
  position: absolute;
  top: 0;
  left: 30rpx;
/*  background-color: #ff5a5f;
  color: white;*/
  font-size: 18rpx;
  padding: 4rpx 9rpx;
  border-radius: 0 0 8rpx 8rpx;
  z-index: 10;
}

.scroll-view {
  white-space: nowrap;
  overflow-x: auto;
  width: 100%;
  padding-left: 30rpx;
  box-sizing: border-box;

  /* 隐藏滚动条 */
  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
}

.icon-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  padding: 10rpx 5rpx;
  cursor: pointer;
  transition: transform 0.2s;

  &:last-child {
    margin-right: 0;
  }

  &:active {
    transform: scale(0.95);
  }
}


.icon-image {
  width: 50rpx;
  height: 50rpx;
  border-radius: 50%;
}

.icon-label {
  font-size: 24rpx;
  color: #333;
  margin-top: 10rpx;
  white-space: nowrap;
}

/* 更多功能样式 */
.more-functions {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 20;
  cursor: pointer;

  &:active {
    transform: translateY(-50%) scale(0.95);
  }
}
</style>